<template>
  <div v-if="viewpageShow">
    <el-dialog title="图纸详情" :visible.sync="viewpageShow" width="65%" append-to-body>
      <div class="el-dialog-div">
        <basic-container>
          <el-collapse v-model="activeNames">
            <el-collapse-item title="设备基础信息" name="1">
              <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small" ref="searchForm"
                style="margin-top: 10px">
                <el-row>
                  <el-col :span="6">
                    <el-form-item label="设备代号" prop="drawingNumber">
                      <el-input clearable v-model="formInline.drawingNumber" disabled></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="设备名称" prop="drawingName">
                      <el-input clearable v-model="formInline.drawingName" disabled></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="设备材料" prop="material">
                      <el-input clearable v-model="formInline.material" disabled></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="图纸备注" prop="drawingRemark">
                      <el-select v-model="formInline.drawingRemark" clearable disabled>
                        <el-option v-for="(item) in drawingRemarkList" :key="item.id" :label="item.dictValue"
                          v-bind:value="item.dictValue"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="6">
                    <el-form-item label="图纸类型" prop="drawingType">
                      <el-select v-model="formInline.drawingType" clearable disabled>
                        <el-option v-for="(item) in drawingTypeList" :key="item.id" :label="item.name"
                          v-bind:value="item.code"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="特征值一" prop="characOne">
                      <el-input clearable v-model="formInline.characOne" disabled></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="特征值二" prop="characTwo">
                      <el-input clearable v-model="formInline.characTwo" disabled></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="特征值三" prop="characThree">
                      <el-input clearable v-model="formInline.characThree" disabled></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="6">
                    <el-form-item label="附件列表展示" v-show=" count ">
                      <el-link v-for="(item) in attachFileList" type="primary" :href="item.link" :underline="false"
                        :download="item.originalName" target="_blank">
                        <el-button type="primary" size="small" plain
                          style="height: 28px;padding: 7px 15px;margin-top: 1px;" icon="el-icon-download">
                          {{item.originalName}}</el-button>
                      </el-link>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </el-collapse-item>
            <el-collapse-item title="设备信息展示" name="2">
              <el-table :data="tableData" height="350" border size="small" style="width: 100%;"
                :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}">
                <el-table-column prop="drawingNumber" fixed label="图纸代号" show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="drawingName" label="图纸名称" show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="drawingTypeName" label="图纸类别"></el-table-column>
                <el-table-column prop="num" label="数量"></el-table-column>
                <el-table-column prop="material" label="材料"></el-table-column>
                <el-table-column prop="singleWeight" label="单重"></el-table-column>
                <el-table-column prop="drawingProperty" label="属性"></el-table-column>
                <el-table-column prop="drawingRemark" label="备注"></el-table-column>
                <el-table-column prop="characOne" label="特征一"></el-table-column>
                <el-table-column prop="characTwo" label="特征二"></el-table-column>
                <el-table-column prop="characThree" label="特征三"></el-table-column>
                <!-- <el-table-column prop="status" label="图纸状态" ></el-table-column> -->
                <el-table-column label="附件地址" prop="fileAddress" fixed="right" width="220">
                  <template slot-scope="scope">
                    <el-link v-for="(item) in scope.row.fileAddress" type="primary" :href="item.link" :underline="false"
                      :download="item.originalName" target="_blank">
                      <el-button type="primary" size="small" plain
                        style="height: 28px;padding: 7px 15px;margin-top: 1px;" icon="el-icon-download">
                        {{item.originalName}}</el-button>
                    </el-link>
                  </template>
                </el-table-column>
              </el-table>

            </el-collapse-item>
            <el-collapse-item title="物料信息展示" name="3">
              <el-table :data="materialData" height="350" border size="small" style="width: 100%;"
                :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}">
                <el-table-column prop="drawingNumber" fixed label="图纸代号"></el-table-column>
                <el-table-column prop="drawingName" label="图纸名称" show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="num" label="数量"></el-table-column>
                <el-table-column prop="material" label="材料"></el-table-column>
                <el-table-column prop="singleWeight" label="单重"></el-table-column>
                <el-table-column prop="drawingProperty" label="属性"></el-table-column>
                <el-table-column prop="drawingRemark" label="备注"></el-table-column>
                <el-table-column prop="characOne" label="特征一"></el-table-column>
                <el-table-column prop="characTwo" label="特征二"></el-table-column>
                <el-table-column prop="characThree" label="特征三"></el-table-column>
              </el-table>

            </el-collapse-item>
          </el-collapse>
        </basic-container>
      </div>
    </el-dialog>
  </div>

</template>

<script>
  import { getDrawingTypeList, getDictValueList, getDrawingInfoByNodeId } from "@/api/resource/attach";
  import { getChildNode, getAttachList } from "@/api/drawing/viewpage";
 
  export default {
    name: "viewpage",
    data() {
      return {
        // 表格中数据
        tableData: [],
        materialData: [],
        attachFileList: [],
        count: true,
        activeNames: ['1'],
        drawingTypeList: [],
        drawingRemarkList: [],
        formInline: {
          drawingNumber: '',
          drawingName: '',
          material: '',
          drawingProperty: '',
          drawingRemark: '',
          characOne: '',
          characTwo: '',
          characThree: '',
          drawingType: '',
          address: 'www.baidu.com'
        },
        drawId: '',
        viewpageShow: false,
      }
    },
    /*  created() {
       this.getDrawingTypeListFun();
       this.drawingTypeListFun();
       this.getDetail();
       this.getChildNodeFun();
     },  */
    methods: {
      // 获取节点的物料信息
      getChildNodeFun() {
        getChildNode(this.drawId).then(res => {
          if (res.data.data["eqpList"] != null) {
            this.tableData = res.data.data["eqpList"];
          }
          if (res.data.data["materialList"] != null) {
            this.materialData = res.data.data["materialList"];
          }
        })
      },
      setDrawId(id) {
        this.drawId = id;
      },
      initData() {
        this.tableData = [];
        this.materialData = [];
        this.formInline = [];
        this.attachFileList = [];
        this.drawingTypeList = [];
        this.drawingRemarkList = [];
      },

      parentCreated() {
        this.getDrawingTypeListFun();
        this.drawingTypeListFun();
        this.getDetail();
        this.getChildNodeFun();
        this.viewpageShow = true;
      },

      getDetail() {
        // 加载表中信息
        getDrawingInfoByNodeId(this.drawId).then(res => {
          this.formInline = res.data.data;
        })
        // 加载附件信息  attachFileList
        getAttachList(this.drawId).then(res => {
          this.attachFileList = res.data.data;
          let statusCount = 0;
          this.count = true;
          this.attachFileList.map(function(e){
            debugger
            if(e.status==2){
              statusCount+=1;
            }
          })
          if(statusCount>0){
            this.count = false;
          }
        })

      },
      getDrawingTypeListFun() {
        getDrawingTypeList().then(res => {
          this.drawingTypeList = res.data.data;
        })
      },
      drawingTypeListFun() {
        getDictValueList("drawing_remark").then(res => {
          this.drawingRemarkList = res.data.data;
        })
      },



    },

  }
</script>

<style scoped>
  /*.el-tooltip__popper{font-size: 14px; max-width: 50%}*/
  .el-dialog-div {
    height: 600px;
    overflow: auto;
  }
</style>